<template>
  <div class="mask"></div>
  <div class="listbdc">
    <el-scrollbar :always="true" max-height="260px" tag="ul" v-if="flag">
      <li
        v-for="(item, index) in songlist"
        :key="item.id"
        class="scrollbar-demo-item"
        @click="clickPlay(item)"
      >
        <div class="col col-1">
          <div class="playicn"></div>
        </div>
        <div class="col col-2 overtext">{{ item.name }}</div>
        <div class="col col-3" @click.stop>
          <div class="icns">
            <i class="ico icn-del" title="删除" @mousedown="songListDelete(index)"
              >删除</i
            >
            <i class="ico icn-dl" title="下载">下载</i>
            <i class="ico icn-share" title="分享">分享</i>
            <i class="ico icn-add" title="收藏">收藏</i>
          </div>
        </div>
        <div class="col col-4 overtext">
          <span :title="meageTitle(item.ar)" v-html="meageElement(item.ar)"> </span>
        </div>
        <div class="col col-5">{{ formattingTime(item.dt) }}</div>
        <div class="col col-6">
          <a href="javascirpt:;" title="来自歌单" class="ico ico-src">来源</a>
        </div>
      </li>
    </el-scrollbar>
    <div v-else class="nocnt">
      <i class="ico-face"></i>
      你还没有添加任何歌曲<br />
      去首页
      <a href="javascirpt:;" class="f-tdu">发现音乐</a>
      ，或在
      <a href="javascript:;" class="f-tdu">我的音乐</a>
      收听自己收藏的歌单。
    </div>
  </div>
  <div class="bline"></div>
</template>

<script>
import { toRef, ref, watch } from "vue";
import { useStore } from "vuex";
import clickPlay from "@/baseFnMixin/songListClickPlay.js";
import { meageTitle, meageElement } from "@/baseFnMixin/mergeName/mergeNameMixin.js";
import { formattingTime } from "@/baseFnMixin/formattingTime/formattingTime.js";
export default {
  name: "FloorSongPlayList",
  setup() {
    const store = useStore();
    let flag = ref(false);

    let songlist = toRef(store.state.SongList, "songlist");
    function songListDelete(value) {
      store.commit("SongList/SONGLISTDELETE", value);
    }
   
    watch(
      songlist,
      () => {
        if (
          store.state.SongList.songlist === null ||
          store.state.SongList.songlist.length === 0
        ) {
          flag.value = false;
        } else {
          flag.value = true;
        }
      },
      {
        immediate: true,
      }
    );
    const play = clickPlay();
    return {
      songlist,
      songListDelete,
      flag,
      ...play,
      meageTitle,
      meageElement,
      formattingTime,
    };
  },
};
</script>

<style scoped lang="less">
.mask {
  position: absolute;
  left: 2px;
  top: 0;
  width: 558px;
  height: 260px;
  background: #121212;
  opacity: 0.5;
  z-index: 2;
}
.listbdc {
  position: absolute;
  left: 2px;
  top: 0;
  z-index: 4;
  height: 260px;
  width: 559px;
  overflow: hidden;
  color: #ccc;
  .z-sel {
    display: block;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    a {
      color: #fff;
    }
  }
  li {
    float: left;
    width: 100%;
    &:hover {
      .icns {
        display: block;
      }
    }
  }
}

.col {
  float: left;
  padding-left: 10px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
  cursor: pointer;
  .icns {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 23px;
  }
  .ico {
    float: right;
    overflow: hidden;
    margin: 7px 0 0 10px;
    text-indent: -9999px;
    height: 16px;
    background: url(../../../common/images/playlist.png) no-repeat 0 9999px;
  }
  .icn-del {
    width: 13px;
    background-position: -51px 0;
    &:hover {
      background-position: -51px -20px;
    }
  }
  .icn-dl {
    width: 14px;
    background-position: -57px -50px;
    &:hover {
      background-position: -80px -50px;
    }
  }
  .icn-share {
    width: 14px;
    background-position: 0 0;
    &:hover {
      background-position: 0 -20px;
    }
  }
  .icn-add {
    width: 16px;
    background-position: -24px 0;
    &:hover {
      background-position: -24px -20px;
    }
  }
  .ico-src {
    float: right;
    width: 14px;
    margin-left: 0;
    background-position: -80px 0px;
  }
}
.playicn {
  //   display: none;
  margin-top: 8px;
  width: 10px;
  height: 13px;

  background: url(../../../common/images/playlist.png) no-repeat -182px 0;
}
.col-1 {
  width: 10px;
}
.col-2 {
  width: 256px;
}
.col-3 {
  width: 78px;
  position: relative;
}
.col-4 {
  width: 70px;
}
.col-5 {
  width: 35px;
  color: #666;
}
.col-6 {
  width: 37px;
  padding-left: 6px;
}
.bline {
  position: absolute;
  left: 553px;
  top: -1px;
  z-index: 2;
  width: 6px;
  height: 260px;
  background: #000;
  opacity: 0.5;
}
.scrol {
  position: absolute;
  left: 0;
  top: 33px;
  width: 4px;
  border-radius: 5px;
  height: 219.481px;
  cursor: pointer;
  background: #868686;
  border: 1px solid #a6a6a6;
  opacity: 0.8;
}
.box {
  max-height: 260px;
}
.nocnt {
  padding-top: 85px;
  text-align: center;
  line-height: 43px;
  color: #aaa;
  a {
    color: #aaa;
  }
}
.ico-face {
  position: relative;
  display: inline-block;
  margin-right: 3px;
  top: -4px;
  width: 36px;
  height: 29px;
  vertical-align: middle;
  background: url(../../../common/images/playlist.png) no-repeat -138px 0;
}
.f-tdu {
  text-decoration: underline;
}
</style>
